<template>
  <div
    ref="el"
    v-loading="loading"
  >
    <!--      添加问卷题      -->
    <el-button
      type="primary"
      :icon="Plus"
      plain
      @click="addQuestionGroupFunc"
    >
      添加分组
    </el-button>
    <el-anchor
      class="survey-anchor"
      :container="containerRef"
      style="display: none;"
      @change="onChangeAnchorFunc"
    >
      <el-anchor-link
        v-for="(item,item_index) in questionList"
        :key="item_index"
        :href="'#survey_a_'+item.id"
        :title="item.title"
      />
    </el-anchor>

    <ul ref="containerRef" class="questionnaire-box questionnaire-edit" style="height:440px;overflow-y: auto;">
      <!-- <draggable v-model="questionList" @change="draggableQuestionFunc">
      </draggable> -->
      <li
        v-for="(item,item_index) in questionList"
        :id="'survey_a_'+item.id"
        :key="item_index"
        class="questionnaire-item"
      >
        <div class="item-hd clearfix" :class="[ item.show && scrollAnchorId == 'survey_a_' + item.id ? 'fixed-hd' : '' ]">
          <span class="left" @click="item.show = !item.show">
            <el-icon v-if="item.show"><ArrowUp /></el-icon>
            <el-icon v-else><ArrowDown /></el-icon>
            {{ item.title }}
          </span>
          <span class="right">
            <el-button link type="primary" @click="addQuestionDetailFunc(item)">添加题</el-button>
            <el-button link type="primary" @click="editQuestionGroupFunc(item_index)">编辑</el-button>
            <el-popconfirm
              title="确定删除该分组吗?"
              cancel-button-text="取消"
              confirm-button-text="确定"
              @confirm="() => delQuestionGroupFunc(item_index)"
            >
              <template #reference>
                <el-button link type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </span>
        </div>
        <div
          v-if="item.show"
          :id="'survey_div_'+item.id"
          class="item-bd"
          :class="[item.show && scrollAnchorId == 'survey_a_' + item.id ? 'fixed-content' : '']"
        >
          <!-- <draggable v-model="item.details" @end="onTrendEndFunc(item_index,$event)">
          </draggable> -->
          <div
            v-for="(detail,detail_index) in item.details"
            :key="detail_index"
            class="question-list"
            :class="[detail.editable ? 'editing' : '']"
          >
            <div class="question">
              <template v-if="detail.editable">
                <el-input
                  v-model="detail.title"
                  placeholder="请输入标题"
                  style="width: 40%"
                  @change="(v) => detail.title = v"
                />
                <div class="type-box">
                  <el-radio-group
                    v-model="detail.type"
                    @change="(v) => {
                      detail.type = v
                      detail.optionJson = []
                    }"
                  >
                    <el-radio
                      v-for="(o,o_index) in typeOptions"
                      :key="o_index"
                      style="width: 30px !important; margin-left: 5px;"
                      :value="o.value"
                      :label="o.label"
                    />
                  </el-radio-group>
                </div>
              </template>
              <template v-else>
                {{ detail.title }}
                <template v-if="detail.conditionJson?.max">
                  <span class="notice">（最多选择：<b>{{ detail.conditionJson.max }}</b>项）</span>
                </template>
                <template v-else-if="detail.type == 2">
                  <span class="notice">（多选）</span>
                </template>
                <span v-if="detail.conditionJson?.mutex?.target?.length > 0 && detail.conditionJson?.mutex?.source?.length > 0">
                  <span class="notice">
                    (互斥：
                    <span class="option">
                      {{ detail.conditionJson.mutex.target.join(',') }}&lt;&gt;{{ detail.conditionJson.mutex.source.join(',') }}
                    </span>)
                  </span>
                </span>
              </template>
              <span class="right">
                <el-button
                  v-if="detail.editable"
                  link
                  type="primary"
                  @click="saveQuestionDetailFunc(detail)"
                >保存</el-button>
                <el-button
                  v-else
                  link
                  type="primary"
                  @click="() => {
                    if(questionEditing){
                      ElMessage({
                        type: 'warning',
                        message: `有待保存的问题，请先保存！`
                      })
                    }else{
                      questionEditing = true
                      detail.editable = true
                    }
                  }"
                >编辑</el-button>
                <el-popconfirm
                  title="确定删除吗?"
                  cancel-button-text="取消"
                  confirm-button-text="确定"
                  @confirm="() => delQuestionDetailFunc(item_index, detail_index)"
                >
                  <template #reference>
                    <el-button link type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </span>
            </div>
            <div v-if="detail.editable" class="answer">
              <div>
                <el-button link type="primary" @click="conditionShowFunc(detail, item)">
                  显示条件：
                </el-button>
                <div class="condition-box">
                  <template v-if="detail.conditionJson?.show?.id && detail.conditionJson?.show?.target">
                    <span>
                      【{{ item.details.find(n => n.id && n.id == detail.conditionJson.show.id).title }}】
                    </span>
                    <span class="option">
                      【{{ item.details.find(n => n.id && n.id == detail.conditionJson.show.id).optionJson.filter(n=>{
                        return detail.conditionJson.show.target.includes(n.key)
                      }).map(n=>{
                        return `${n.key}=${n.label}`
                      }).join('， ') }}】
                    </span>
                  </template>
                </div>
              </div>
              <template v-if="detail.type==1 || detail.type == 2">
                <div v-if="detail.type == 2">
                  <div>
                    <el-checkbox
                      style="margin-left: 10px;"
                      :checked="detail.conditionJson?.max ? true : false"
                      @change="(v) => conditionMaxChangeFunc(detail, v)"
                    >
                      限制多选数量：
                    </el-checkbox>
                    <el-input
                      v-if="detail.conditionJson?.max"
                      v-model="detail.conditionJson.max"
                      type="number"
                      style="width: 80px; margin-left: 10px;"
                      @change="(v) => detail.conditionJson.max = v"
                    />
                  </div>
                  <div>
                    <el-checkbox
                      style="margin-left: 10px;"
                      :checked="detail.conditionJson?.mutex ? true : false"
                      @change="(v) => conditionMutexChangeFunc(detail, v)"
                    >
                      设置互斥：
                    </el-checkbox>
                    <div v-if="detail.conditionJson?.mutex" class="mutex-box">
                      <el-checkbox-group v-model="detail.conditionJson.mutex.target" @change="(v) => detail.conditionJson.mutex.target = v">
                        <el-checkbox
                          v-for="(o,o_index) in detail.optionJson"
                          :key="o_index"
                          :value="o.key"
                          :label="o.key"
                          :disabled="detail.conditionJson.mutex.source.includes(o.key)"
                        />
                      </el-checkbox-group>
                      &lt;&gt;
                      <el-checkbox-group v-model="detail.conditionJson.mutex.source" @change="(v) => detail.conditionJson.mutex.source = v">
                        <el-checkbox
                          v-for="(o,o_index) in detail.optionJson"
                          :key="o_index"
                          :value="o.key"
                          :label="o.key"
                          :disabled="detail.conditionJson.mutex.target.includes(o.key)"
                        />
                      </el-checkbox-group>
                    </div>
                  </div>
                </div>
                <div
                  v-for="(o,o_index) in detail.optionJson"
                  :key="o_index"
                  style="padding:5px"
                >
                  <el-input v-model="o.key" style="width: 50px" @change="(v) => o.key = v" />
                  <el-input
                    v-model="o.label"
                    style="width: 250px"
                    placeholder="请输入内容"
                    @change="(v) => o.label = v"
                  />
                  <el-checkbox
                    style="margin-left: 10px;"
                    :checked="o.other == 1 ? true : false"
                    label="其他请输入"
                    @change="(v) => { if (v) o.other = 1; else o.other = 0; }"
                  />
                  <el-popconfirm
                    title="确定删除吗?"
                    cancel-button-text="取消"
                    confirm-button-text="确定"
                    @confirm="() => detail.optionJson.splice(o_index , 1)"
                  >
                    <el-icon class="el-icon-delete"><Delete /></el-icon>
                  </el-popconfirm>
                </div>
                <el-button link type="primary" @click="addOptionKeyFunc(detail)">新增</el-button>
              </template>
              <el-input v-else-if="detail.type==3" type="textarea" :auto-size="{ minRows: 3, maxRows: 5 }" />
              <template v-else-if="detail.type==4">
                <div v-for="(d,d_index) in detail.optionJson" :key="d_index" class="inline-inp">
                  <el-input
                    v-model="d.label"
                    style="width: 250px"
                    placeholder="请输入内容"
                    @change="(v) => d.label = v"
                  />
                  <el-popconfirm
                    title="确定删除吗?"
                    cancel-button-text="取消"
                    confirm-button-text="确定"
                    @confirm="() => detail.optionJson.splice(d_index,1)"
                  >
                    <el-icon class="el-icon-delete"><Delete /></el-icon>
                  </el-popconfirm>
                </div>
                <el-button link type="primary" @click="addOptionKeyFunc(detail)">新增</el-button>
              </template>
            </div>
            <div v-if="!detail.editable" class="answer">
              <div v-if="detail.conditionJson?.show?.id&& detail.conditionJson?.show?.target" class="notice">
                显示条件：
                <span class="option">
                  【{{ item.details.find(n=>n.id && n.id==detail.conditionJson.show.id).title }}】
                  <span>
                    【{{ item.details.find(n=>n.id && n.id==detail.conditionJson.show.id).optionJson.filter(n=>{
                      return detail.conditionJson.show.target.includes(n.key)
                    }).map(n=>{
                      return `${n.key}=${n.label}`
                    }).join(',') }}】
                  </span>
                </span>
              </div>
              <el-radio-group v-if="detail.type == 1">
                <el-radio
                  v-for="(o,o_index) in detail.optionJson"
                  :key="o_index"
                  :value="o.key"
                  :label="o.label"
                >
                  {{ o.key }}. {{ o.label }}
                  <template v-if="o.other == 1">
                    ：<el-input style="width: 100px;" placeholder="请填写" />
                  </template>
                </el-radio>
              </el-radio-group>
              <el-checkbox-group v-else-if="detail.type == 2">
                <el-checkbox
                  v-for="(o,o_index) in detail.optionJson"
                  :key="o_index"
                  :value="o.key"
                  :label="o.label"
                >
                  {{ o.key }}. {{ o.label }}
                  <template v-if="o.other == 1">
                    ：<el-input style="width: 100px;" placeholder="请填写" />
                  </template>
                </el-checkbox>
              </el-checkbox-group>
              <el-input v-else-if="detail.type==3" type="textarea" :auto-size="{ minRows: 3, maxRows: 5 }" />
              <template v-else-if="detail.type==4">
                <div v-for="(d,d_index) in detail.optionJson" :key="d_index" class="inline-inp">
                  <span class="txt">{{ d.label }}：</span>
                  <el-input placeholder="" />
                </div>
              </template>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <!--      添加问卷题end      -->
  </div>
</template>


<script lang="ts" >
import { defineComponent, onMounted, watchEffect, ref, nextTick, h } from 'vue'
import { Plus } from '@element-plus/icons-vue'
// import draggable from 'vuedraggable'
import { getListQuestionApi, updateQuestionGroupApi, updateQuestionDetailApi, updateQuestionGroupSortApi, updateQuestionDetailSortApi } from '@/api/admin'
import { assign, cloneDeep } from 'lodash-es'
import { ElMessageBox, ElMessage, ElSelect, ElOption, ElCheckboxGroup, ElCheckbox } from 'element-plus'
import { de } from 'element-plus/es/locale'
export default defineComponent({
  name: 'QuestionEdit',
  props:{
    templateId: {
      type: Number
    }
  },
  setup(props) {
    const el = ref([])
    const loading = ref(false)
    const questionEditing = ref(false)
    const containerRef = ref<HTMLElement | null>(null)
    const typeOptions = ref([{ value:1,label:'单选' },{ value:2,label:'多选' },{ value:3,label:'文本' },{ value:4,label:'多文本' }])
    const trendListObj = ref([])
    const addGroupData = ref({ id:null, show:true, title: null })
    const addTrendData = ref({ id:null,type:1,groupId:null,title:null,optionJson:null,conditionJson:null,editable:true })
    const questionList = ref([])
    const scrollAnchorId = ref('')
    const optTitle = ref('')

    const onTrendEndFunc = (index,added,removed,moved) => {
      let data=this.questionList[index].details.map((n,i)=>{
        return { id:n.id,sortno:i }
      })
      if(data && data.length>0){
        updateQuestionDetailSortApi(data).then((res) => {
          if(res){
            // this.$message.success('ok')
          }
        })
      }
    }
    // added, removed, moved
    const draggableQuestionFunc = () => {
      let data = questionList.value.map((n,i)=>{
        return { id: n.id, sortno: i }
      })
      if(data && data.length > 0){
        updateQuestionGroupSortApi(data).then((res) => {
          if(res){
            // this.$message.success('ok')
          }
        })
      }
    }
    const conditionShowFunc = (item, group) => {
      if(!item.conditionJson) item.conditionJson = {}
      const selId = ref(null)
      const selVal = ref([])
      const subOptions = ref([])
      let selOptions = group.details
        .filter((n)=> n.id && n.id != item.id && (n.type==1 || n.type==2))
        .map((n)=>{
          return { value: n.id, label: n.title, options: n.optionJson }
        })
      if(item.conditionJson?.show?.id){
        selId.value = item.conditionJson.show.id
        subOptions.value = selOptions
          .find((n) => n.value == selId.value).options
          .map((n)=>{
            return { value: n.key, label: n.label }
          })
      }
      if(item.conditionJson?.show?.target)
        selVal.value = item.conditionJson.show.target
      ElMessageBox({
        title: '显示条件',
        // Should pass a function if VNode contains dynamic props
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        message: () =>
          h ('div',
            {
              style: {
                width: '400px'
              }
            },
            [
              h(
                ElSelect,
                {
                  modelValue: selId.value,
                  'onUpdate:modelValue': (value: any) => {
                    console.log('=select=onUpdate:modelValue=', value)
                    selId.value = value
                  },
                  placeholder: '请选择..',
                  clearable: true,
                  onChange: (value) => {
                    console.log('=select=onChange=', value, selId.value)
                    subOptions.value = selOptions
                      .find((n) => n.value == value).options
                      .map((n)=>{
                        return { value: n.key, label: n.label }
                      })
                  }
                },
                () => {
                  const optionDom = []
                  selOptions.forEach((row) => {
                    optionDom.push(h(ElOption, { label: row.label, value: row.value, key: row.value }))
                  })
                  return optionDom
                }
              ),
              h(
                ElCheckboxGroup,
                {
                  modelValue: selVal.value,
                  'onUpdate:modelValue': (value: any) => {
                    console.log('=checkbox-group=onUpdate:modelValue=', value)
                    selVal.value = value
                  },
                  clearable: true,
                  onChange: (value) => {
                    console.log('=checkbox-group=onChange=', value, selVal.value)
                  }
                },
                () => {
                  const optionDom = []
                  subOptions.value.forEach((row) => {
                    // console.log('=subOptions=row==', row)
                    optionDom.push(h(ElCheckbox, { label: row.value + '.' + row.label, value: row.value, key: row.value }))
                  })
                  return optionDom
                }
              )
            ]
          )
      })
        .then(() => {
          console.log('=save=selId', selId.value)
          console.log('=save=selVal', selVal.value)
          if(!selId.value || !selVal.value || selVal.value?.length == 0){
            ElMessage({
              type: 'warning',
              message: `未设置！`
            })
            assign( item.conditionJson, { show: null })
            return false
          }
          if(!item.conditionJson?.show){
            assign(item.conditionJson, { show : { target: [],id: null } })
          }
          assign(item.conditionJson, { show: { target: selVal.value, id: selId.value } })
          ElMessage({
            type: 'success',
            message: '条件设置成功'
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消条件设置'
          })
        })
    }
    const conditionMutexChangeFunc = (item, v) => {
      console.log('=conditionMutexChangeFunc=', item, v)
      if(!item.conditionJson) assign(item, { condition: {} })
      if(v)
        assign(item.conditionJson, { mutex: { target:[], source:[] } })
      else
        assign(item.conditionJson, { mutex: null })
    }
    const conditionMaxChangeFunc = (item, v) => {
      if(!item.conditionJson) item.conditionJson = {}
      if(v) assign(item.conditionJson, { max : 1 })
      else  assign(item.conditionJson, { max : null })
    }
    const addQuestionDetailFunc = (item) => {
      if(questionEditing.value){
        ElMessage({
          type: 'warning',
          message: `有待保存的问题，请先保存！`
        })
        return
      }
      item.show = true
      if(item.details?.length == 0) assign(item, { detail: [] })
      let data = cloneDeep(addTrendData)
      data.value.groupId = item.id
      item.details.push(data.value)
      nextTick(() => {
        let survey = el.value.querySelector(`#survey_div_${item.id}`)
        let div = el.value.querySelector('.questionnaire-box')
        div.scrollTop = survey.offsetTop + survey.offsetHeight - div.offsetHeight
      })
      questionEditing.value = true
    }
    const addOptionKeyFunc = (item) => {
      if(!item.optionJson) item.optionJson = []
      item.optionJson.push({ key: String.fromCharCode(65 + item.optionJson.length), value:'' })
    }
    const saveQuestionDetailFunc = async (detail) => {
      if(!detail.title){
        ElMessage({
          type: 'error',
          message: `请输入标题`
        })
        return
      }
      console.log('detail--', detail)
      if(detail.type==3){
        detail.optionJson = null
      }else{
        // 校验互斥条件
        if (detail.conditionJson?.mutex) {
          if (detail.conditionJson?.mutex?.target?.length === 0 && detail.conditionJson?.mutex?.source?.length === 0) {
            ElMessage({
              type: 'error',
              message: `未设置互斥条件！`
            })
            return
          }
          if (detail.conditionJson?.mutex?.target?.length !== 0 && detail.conditionJson?.mutex?.source?.length === 0) {
            ElMessage({
              type: 'error',
              message: `互斥条件设置有误！`
            })
            return
          }
          if (detail.conditionJson?.mutex?.target?.length === 0 && detail.conditionJson?.mutex?.source?.length !== 0) {
            ElMessage({
              type: 'error',
              message: `互斥条件设置有误！`
            })
            return
          }
        }
        // console.log('detail.optionJson--', detail.optionJson)
        if(!detail.optionJson || detail.optionJson.length === 0){
          detail.optionJson = []
          ElMessage({
            type: 'error',
            message: `未添加选项！`
          })
          return
        }
        if(detail.optionJson.some((n) => detail.type == 4 ? (!n.key || !n.label) : !n.label)){
          ElMessage({
            type: 'error',
            message: `选项必填！`
          })
          return
        }
      }
      let { id, groupId, type, title, optionJson, conditionJson } = detail
      loading.value = true
      await updateQuestionDetailApi({ id, groupId, type, title, optionJson:JSON.stringify(optionJson), conditionJson:JSON.stringify(conditionJson) }).then((res)=>{
        if(res){
          if(res !== 200) assign(detail, { id: res })
          ElMessage({
            type: 'success',
            message: `保存成功`
          })
          detail.editable = false
          questionEditing.value = false
          loading.value = false
        }
      })
    }
    const addQuestionGroupFunc = () => {
      ElMessageBox.prompt('', '分组名称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: true,
        inputPlaceholder: '请输入分组名称',
        inputPattern: /.*[^\s]/,
        inputErrorMessage: '分组名称不能为空！'
      })
        .then((param) => {
          // console.log('value---', param.value)
          let newData = assign(addGroupData.value, { title: param.value }, { detail: [] })
          // console.log('newData---', newData)
          updateQuestionGroupApi({ title: newData.title, templateId: props.templateId }).then((res)=>{
            if(res){
              if (res.code !== 200) assign(newData, { id: res })
              questionList.value.push(newData)
              ElMessage({
                type: 'success',
                message: `添加成功`
              })
              initFunc()
            }
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消添加'
          })
        })
    }
    const editQuestionGroupFunc = (index) => {
      var newData = questionList.value[index]
      console.log('newData---', newData)
      ElMessageBox.prompt('请输入内容', '分组名称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: newData.title,
        inputPattern: /.*[^\s]/,
        inputErrorMessage: '分组名称不能为空！'
      })
        .then(() => {
          updateQuestionGroupApi({ id: newData.id, title: newData.title }).then((res) => {
            if(res){
              ElMessage({
                type: 'success',
                message: `编辑成功`
              })
              initFunc()
            }
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消编辑'
          })
        })
    }
    const delQuestionDetailFunc = (gindex,index) => {
      var newData = questionList.value[gindex].details[index]
      if(!newData.id){
        questionList.value[gindex].details.splice(index,1)
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
        questionEditing.value = false
      }else{
        updateQuestionDetailApi({ id: newData.id, displayState: 0 }).then((res)=>{
          if(res && res.code === 200){
            this.questionList[gindex].details.splice(index,1)
            ElMessage({
              type: 'success',
              message: '删除成功'
            })
          }
        })
      }
    }
    const delQuestionGroupFunc = (index) => {
      var newData = questionList.value[index]
      if(!newData.id){
        questionList.value.splice(index, 1)
        ElMessage({
          type: 'success',
          message: `删除成功`
        })
      }
      updateQuestionGroupApi({ id: newData.id, displayState: 0 }).then((res)=>{
        if(res && res.code === 200){
          questionList.value.splice(index, 1)
          ElMessage({
            type: 'success',
            message: `删除成功`
          })
          initFunc()
        }
      })
    }
    const initFunc = async () => {
      await getListQuestionApi({ entity: { templateId: props.templateId } }).then((res)=>{
        console.log('res---', res)
        if(res){
          res.result.forEach((n)=>{
            n.show = false
            if(n.details && n.details.length > 0){
              n.details.forEach((d)=>{
                d.editable = false
                trendListObj.value[d.id] = d
                if(d.optionJson) d.optionJson = JSON.parse(d.optionJson)
                if(d.conditionJson) d.conditionJson = JSON.parse(d.conditionJson)
                else d.conditionJson = {}
                if(d.answerJson) d.answerJson = JSON.parse(d.answerJson)
                else d.answerJson={ value:null }
              })
            }
          })
          questionList.value = res.result
        }
      })
    }
    const onChangeAnchorFunc = (id) => {
      console.log('id===', id)
      scrollAnchorId.value = id.substring(1,id.length)
      console.log('scrollAnchorId===', scrollAnchorId.value)
    }
    onMounted(() => {
      initFunc()
    })
    watchEffect(() => {
      if (props.templateId) {
        initFunc()
      }
    })
    return {
      el,
      loading,
      questionEditing,
      containerRef,
      typeOptions,
      trendListObj,
      addTrendData,
      addGroupData,
      questionList,
      scrollAnchorId,
      optTitle,

      onTrendEndFunc,
      draggableQuestionFunc,
      conditionShowFunc,
      conditionMutexChangeFunc,
      conditionMaxChangeFunc,
      addQuestionDetailFunc,
      addOptionKeyFunc,
      saveQuestionDetailFunc,
      addQuestionGroupFunc,
      editQuestionGroupFunc,
      delQuestionDetailFunc,
      delQuestionGroupFunc,
      initFunc,
      onChangeAnchorFunc,

      Plus,
      ElMessage
    }
  }
})
</script>
<style lang="scss" scoped>
.survey-item{
    height:600px;
    overflow-y:auto ;
}
.left{ float:left;}
.right{ float:right;}
.clearfix:after{ content:"."; display:block; clear:both; font-size:0; height:0; overflow:hidden;}
.survey-anchor{
  .el-anchor-ink{
    display: none;
  }
  .el-anchor-link{
    width: 200px;
    margin-right: 10px;
    border-bottom: 5px solid #e8e8e8;
    display: inline-block;
    padding:0;
    box-sizing: border-box;
    .el-anchor-link-title{
      padding: 7px 10px 7px 0;
    }
    &:hover,
    &.el-anchor-link-active{
      border-bottom-color: #2677e4;
      .el-anchor-link-title{
        color: #2677e4;
      }
    }
  }
}
.questionnaire-box{
  .questionnaire-item{
    padding-bottom: 20px;
    .item-hd{
      font-size: 20px;
      color: #222222;
      padding:15px 0 10px;
      font-weight: 600;
      [class^='link']{
        font-size: 14px;
        font-weight: normal;
      }
    }
  }
}
.question-list{
  width: 95%;
  &.question-list-indent{
    padding:20px;
    .el-radio-group .el-radio,
    .el-checkbox-group .el-checkbox{
      display: inline-block;
    }
  }
  &.filter-box{
    filter: blur(1.5px);
    pointer-events: none;
  }
  .question{
    font-size: 16px;
    color: #222222;
    padding: 10px 0;
  }
  .answer{
    padding-left: 20px;
    .inline-inp{
      padding-bottom: 10px;
      .el-input{
        width: 240px;
      }
    }
    .el-icon-delete {
      cursor: pointer;
      font-size: 16px;
      color: red;
      vertical-align: middle;
      margin-left: 5px;
    }
    .condition-box {
      display: inline-block;
      margin-inline-start: 30px;
      color: #07f;
      .option{
        color: #7f7c7c;
      };
    }
  }
  .el-radio-group{
    width: 98%;
  }
  .el-radio-group .el-radio,
  .el-checkbox-group .el-checkbox{
    display: block;
    line-height: 30px;
    margin-bottom: 5px;
    width: 80%;
    // white-space: normal;
  }
  .el-checkbox + .el-checkbox {
    margin-left: 0;
  }
  //.ant-radio-group .ant-radio .ant-radio +span,
  //.ant-checkbox-group .ant-checkbox .ant-checkbox +span{
  //  vertical-align: top;
  //  width:calc(~'100% - 20px');
  //}
}
.questionnaire-edit{
  .questionnaire-item{
    padding-bottom: 0;
    .item-hd{
      font-size: 16px;
      cursor: pointer;
      &.fixed-hd{
        position: fixed;
        top: 220px;
        width: 830px;
        background: #fff;
        z-index: 99;
      }
    }
    .fixed-content{
      padding-top: 40px;
    }
    .question{
      [class^='link']{
        font-size: 14px;
        font-weight: normal;
      }
    }
  }
}
.type-box{
  width: 45%;
  display: inline-block !important;
  margin-left: 10px;
  .el-radio-group{
    display: inline-flex !important;
  }
}
.mutex-box{
  display: inline-block !important;
  .el-checkbox-group{
    margin: 0px 10px 0px 10px;
    display: inline-flex !important;
    .el-checkbox{
      margin-right: 5px;
    }
  }
}
.el-textarea {
  height: 73px;
  min-height: 73px;
  max-height: 115px;
  overflow-y: hidden;
}
.editing{
  background-color: #f3f3f3;
  padding: 15px;
  border-radius: 15px;
}
.notice{
  color: red;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  b {
    margin: 0 5px;
  }
  .option{
    color: #7f7c7c;
  }
}
</style>
